<template>
  <div class="app-container">
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogShow"
      width="800px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="名称" prop="a">
              <common-input v-model="form.a" placeholder="请输入" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="周期" prop="a">
              <el-select v-model="form.b" placeholder="请选择" clearable>
                <el-option label="全部" value></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="时间" prop="c">
              <el-date-picker
                v-model="form.c"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="模块" prop="a">
              <el-select v-model="form.b" placeholder="请选择" clearable>
                <el-option label="全部" value></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="状态" prop="d">
              <el-radio v-model="form.h" label="1">启用</el-radio>
              <el-radio v-model="form.h" label="2">停用</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="close">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      dialogTitle: "新增", // 标题
      dialogShow: false, // 是否显示
      form: {},
      rules: {
        a: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
        b: [
          {
            required: true,
            message: "请选择",
          },
        ],
        c: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
        d: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
      },
      menuTree: [
        {
          id: 1,
          label: "保旺达软件技术有限公司",
          children: [
            {
              id: 2,
              label: "开发部",
              // children: [{
              //   id: 9,
              //   label: '三级 1-1-1'
              // }, {
              //   id: 10,
              //   label: '三级 1-1-2'
              // }]
            },
            {
              id: 3,
              label: "测试部",
            },
            {
              id: 4,
              label: "项目管理办",
            },
          ],
        },
      ], // 菜单树
      treeProp: {
        // 树参数
        children: "children",
        label: "label",
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleNodeClick(data) {
      // console.log(JSON.stringify(data));
      // console.log(data.label);
    },
    /**
     * 关闭
     */
    close() {
      this.$refs.form.resetFields();
      this.dialogShow = false;
      this.$emit("refresh");
    },
    /**
     * 显示
     */
    show(data) {
      this.dialogTitle = data.id ? "编辑" : "新增";
      this.dialogShow = true;
      this.form = data.id ? data : this.$options.data().form;
    },
    /**
     * 提交
     */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.$GlobalSuccessMessage("操作成功");
        }
      });
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped></style>
